<template>
    <div>
        <el-dialog :visible.sync="upload_show"
            width="80%"
            @close="dia_close"
            v-loading="loading">
            <p slot="title"
                style="text-align: left">客户导入向导</p>
            <div v-show="one_show">
                <el-row class="relation">
                    <el-col :span="12">
                        <h1>步骤一：上传EXCEL文件</h1>
                    </el-col>
                    <el-col :span="12">
                        <p>[导入帮助]</p>
                    </el-col>
                </el-row>
                <el-row class="tip">
                    <el-col :span="24">
                        <p>你要从何处导入数据，请选择导入的Excel文件和客户类型</p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"
                        class="form_in">
                        <span>Excel文件：</span>
                        <el-upload class="upload-demo excel_up"
                            action="/api/common/upload/index/"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            :limit="1"
                            :on-success="up_loader"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                            <el-button :loading='$store.state.isLoading'
                                size="small"
                                type="primary">点击上传</el-button>
                            <div slot="tip"
                                class="el-upload__tip excel_tip">注：只能上传excel文件</div>
                        </el-upload>
                    </el-col>
                    <el-col :span="24"
                        class="form_in">
                        <span>选择Sheet表:</span>
                        <el-select v-model="form_sel"
                            placeholder="请选择"
                            @change="sel_sheet_num = sheet_option[form_sel]['number']"
                            style="width: 200px">
                            <el-option v-for="(item,y) in sheet_option"
                                :key="y"
                                :label="item.sheet"
                                :value="item.sheet">
                            </el-option>
                        </el-select>
                        <p style="padding-left: 10px">表格数量:{{sel_sheet_num}}条</p>
                    </el-col>
                    <el-col :span="24"
                        class="form_teach">
                        <h3>导入步骤</h3>
                        <p>第一步：上传存储有客户资料的Excel文件;【你可以直接上传Excel文件】</p>
                        <p>第二步：设置Excel里的列与系统中的列的对应关系；</p>
                        <p>第三步：开始导入</p>
                    </el-col>
                    <el-col :span="24"
                        style="padding: 10px 0">
                        <el-alert title=""
                            type="error"
                            description="全新的客户导入功能，无需任何模版，系统自动匹配关系，数据内容直接导入，使用更加、方便、快捷、智能。">
                        </el-alert>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="24"
                        class="dia_btn">
                        <el-button :loading='$store.state.isLoading'
                            @click="upload_show = false">取 消</el-button>
                        <el-button :loading='$store.state.isLoading'
                            type="primary"
                            @click="one_next_step">下一步</el-button>
                    </el-col>
                </el-row>
            </div>
            <div v-show="two_show">
                <el-row class="relation">
                    <el-col :span="12"
                        style="display: flex;align-items: center">
                        <h1>步骤二：【个人客户】创建对应关系</h1>
                        <p style="padding-left: 50px;color: #435e71;">建立系统列与Excel列的对应关系</p>
                    </el-col>
                    <el-col :span="12">
                        <p>[导入帮助]</p>
                    </el-col>
                </el-row>
                <el-row class="tip">
                    <el-col :span="24">
                        <p>客户信息 <span style="color: red ;padding-left: 20px">*号为必填项</span></p>
                    </el-col>
                </el-row>
                <el-row class="two_table_title">
                    <el-col :span="12"
                        style="border-right: 1px solid #eeeeee">
                        系统列
                    </el-col>
                    <el-col :span="12">
                        Excel列
                    </el-col>
                </el-row>
                <el-row class="two_table_body"
                    v-for="(item,m) in two_list"
                    :key="m">
                    <el-col :span="12">
                        {{item.iden}}
                    </el-col>
                    <el-col :span="12">
                        <el-select v-model="item.con"
                            placeholder="请选择"
                            style="width: 200px">
                            <el-option v-for="(item,y) in two_options"
                                :key="y"
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="24"
                        class="dia_btn">
                        <el-button :loading='$store.state.isLoading'
                            @click="upload_show = false">取 消</el-button>
                        <el-button :loading='$store.state.isLoading'
                            type="primary"
                            @click="two_pre_step">上一步</el-button>
                        <el-button :loading='$store.state.isLoading'
                            type="primary"
                            @click="two_next_step">下一步</el-button>
                    </el-col>
                </el-row>
            </div>

        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "excel_in",
    data () {
        return {
            loading: false,
            two_list: [],
            sel_two: "",
            two_options: [
                // {
                //     value: '选项1',
                //     label: '黄金糕'
                // }, {
                //     value: '选项2',
                //     label: '双皮奶'
                // }, {
                //     value: '选项3',
                //     label: '蚵仔煎'
                // },
            ],
            one_show: true, //第一步
            two_show: false, //第二步
            form_sel: "",
            sel_sheet_num: "0", //选择表格的条数
            sheet_option: {
                请选择: {
                    number: "0",
                    sheet: "请选择"
                }
            },
            file_url: "",
            fileList: [],
            upload_show: false
        };
    },
    props: {
        in_show: {
            type: Boolean,
            default: false
        }
    },
    created () { },
    methods: {
        get_two_title () {
            //第二步左侧列表
            this.loading = true;
            this.$api.getauto.get_sel_title({}).then(res => {
                if (res.data.code == 200) {
                    this.loading = false;
                    this.two_list = res.data.result;
                } else {
                    this.loading = false;
                    this.$fnc.alertError(res.data.result);
                }
            });
        },
        get_two_option () {
            // //第二步左侧列表，自定义标题绑定下拉列表选项
            var obj = {
                sheet: this.form_sel,
                filename: this.file_url
            };
            this.loading = true;
            this.$api.getauto.get_sel_options(obj).then(res => {
                if (res.data.code == 200) {
                    this.loading = false;
                    this.two_options = res.data.result;
                } else {
                    this.loading = false;
                    this.$fnc.alertError(res.data.result);
                }
            });
        },
        get_sheet_num (file) {
            // 上传表的sheet数 和 每个sheet的行数
            this.loading = true;
            this.$api.getauto.get_sheet({ filename: file }).then(res => {
                if (res.data.code == 200) {
                    this.loading = false;
                    this.sheet_option = res.data.result;
                } else {
                    this.loading = false;
                    this.$fnc.alertError(res.data.result);
                }
            });
        },
        two_pre_step () {
            //第二个弹窗上一步
            this.one_show = true;
            this.two_show = false;
        },
        one_next_step () {
            //第一个弹窗下一步
            this.one_show = false;
            this.two_show = true;
            this.get_two_option(); //下拉列表选项
            this.get_two_title();
        },
        two_next_step () {
            //第二个弹窗下一步
            var obj = {};
            this.two_list.forEach(arg => {
                var k = arg.iden;
                var v = arg.con;
                obj[k] = v;
            });
            obj.sheet = this.form_sel;
            obj.filename = this.file_url;
            this.$api.getauto.upload_auto(obj).then(res => {
                if (res.data.code == 200) {
                    this.$fnc.alertSuccess("修改成功");
                    this.one_show = true;
                    this.two_show = false;
                } else {
                    this.$fnc.alertError(res.data.result);
                }
            });
            this.$emit("is_close", false);
        },
        up_loader (response) {
            //上传文件成功
            if (response.code == 200) {
                this.file_url = response.result;
                this.get_sheet_num(this.file_url);
            } else {
                this.loading = false;
                this.file_url = "";
                this.fileList = [];
                this.$fnc.alertError(response.code_desc, response.result);
            }
        },
        handleRemove (file, fileList) {
            console.log(file, fileList);
        },

        handleExceed (files, fileList) {
            this.$message.warning(
                `当前限制选择 1个文件，本次选择了 ${
                files.length
                } 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove (file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        dia_close () {
            this.$emit("is_close", false);
        },
        handleClose () {
            this.upload_show = false;
        }
    },
    watch: {
        in_show (old, after) {
            this.upload_show = old;
        }
    }
};
</script>

<style scoped>
.relation {
    border-bottom: 1px solid #eeeeee;
    height: 50px;
}
.relation h1 {
    text-align: left;
}
.relation p {
    text-align: right;
    font-size: 14px;
    color: #999999;
}
.tip {
    border-bottom: 1px solid #eeeeee;
    height: 60px;
    font-size: 14px;
    line-height: 60px;
    text-align: left;
}
.form_in {
    height: 60px;
    display: flex;
    line-height: 60px;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}
.form_in span {
    width: 10%;
}
.excel_up {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 60px;
    line-height: 60px;
    margin-top: 0;
}
.excel_tip {
    margin-top: 0;
    padding-left: 10px;
}
.excel_up ul li {
    margin-top: 0;
}

.excel_up .el-upload-list__item:first-child {
    margin-top: 0;
}
.form_teach {
    height: 200px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.form_teach h3 {
    line-height: 50px;
}
.form_teach p {
    line-height: 26px;
}
.two_table_title {
    background-color: #f5f5f5;
    height: 50px;
    line-height: 50px;
}
.two_table_body {
    border-bottom: 1px solid #eeeeee;
}
.two_table_body .el-col {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 50px;
}
.dia_btn {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
}
</style>
